<template>
  <div class="sup_add">
    <el-dialog
      :visible.sync="dialogVisible"
      @close="dialogVisibleClose"
      lock-scroll
      width="1000px"
      top="10vh"
    >
      <span
        slot="title"
        class="dialog_title"
      >{{ getTitle() }}</span>
      <div
        class="dialog_div_new "
        :style="{height: newData.typeEdit === 1 ? '70vh' : '63vh'}"
      >
        
        <el-form
          :model="newData"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm bill_mask_back_view"
          :hide-required-asterisk="true"
        >
        <div v-if="newData.typeEdit === 1" class="bill_mask_view"></div>
          <el-row :gutter="24" style>
            <el-col :span="12">
              <el-form-item label prop="companyName">
                <div slot="label" class="custom_star">
                  <p class="custom_label">单位名称</p>
                  <span class="star">*</span>
                </div>
                <!-- <p slot="label" class="custom_label">单位名称</p> -->
                <el-input v-model="newData.companyName" @blur="getNameToPinying"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label prop="companyUserName">
                <p slot="label" class="custom_label">联系人</p>
                <el-input v-model="newData.companyUserName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label prop="xghCompanyNatureId">
                <p slot="label" class="custom_label">单位性质</p>
                <!-- <j-dict-select-tag
                  type="select"
                  dictCode="company_nature"
                  style="width:100%;"
                  v-model="newData.xghCompanyNatureId"
                ></j-dict-select-tag> -->
                <el-select v-model="newData.xghCompanyNatureId" style="width: 100%;">
                    <el-option
                      v-for="item in CompanyNatureOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label prop="companyLandline">
                <p slot="label" class="custom_label">联系电话</p>
                <el-input v-model="newData.companyLandline"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label prop="companyPinyinCode">
                <p slot="label" class="custom_label">拼音编码</p>
                <el-input v-model="newData.companyPinyinCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label prop="companyPhone">
                <p slot="label" class="custom_label">手机</p>
                <el-input v-model="newData.companyPhone"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label prop="xghCompanyTypeId">
                <p slot="label" class="custom_label">单位类别</p>
                <div class="custom_select_head">
                  <el-select
                    v-model="newData.xghCompanyTypeId"
                    style="width:100%;"
                    filterable
                    :filter-method="filterMethodByCompany"
                    @visible-change="visibleChange"
                    ref="companySelect"
                  >
                    <el-option
                      v-for="item in treeOptions"
                      :key="item.id"
                      :label="item.companyTypeName"
                      :value="item.id"
                    ></el-option>
                    <el-option key label value>
                      <div class="custom_add" @click.stop="onAddTree()">
                        <i class="el-icon-plus"></i>
                        <span>新增</span>
                      </div>
                    </el-option>
                  </el-select>
                  <div class="custom_more">
                    <i class="el-icon-more" @click.stop="onShowTreeByCompany"></i>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label prop="sysUserId">
                <p slot="label" class="custom_label">所属业务</p>
                <div class="custom_select_head">
                  <el-select
                    v-model="newData.sysUserId"
                    style="width:100%;"
                    filterable
                    :filter-method="filterMethodByUser"
                    @visible-change="visibleChange"
                  >
                    <el-option
                      v-for="item in userOptions"
                      :key="item.id"
                      :label="item.realname"
                      :value="item.id"
                    ></el-option>
                    <el-option key label value>
                      <div class="custom_add" @click.stop="onShowAddUser">
                        <i class="el-icon-plus"></i>
                        <span>新增</span>
                      </div>
                    </el-option>
                  </el-select>
                  <div class="custom_more">
                    <i class="el-icon-more" @click.stop="onShowUser"></i>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label prop="companyNumber">
                <p slot="label" class="custom_label">单位编码</p>
                <el-input v-model="newData.companyNumber"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label prop="accountBookDeptId">
                <p slot="label" class="custom_label">所属部门</p>
                <div class="custom_select_head">
                  <el-select
                    v-model="newData.accountBookDeptId"
                    style="width:100%;"
                    filterable
                    ref="deptSelect"
                    :filter-method="filterMethodByDept"
                    @visible-change="visibleChange"
                  >
                    <el-option
                      v-for="item in deptOptions"
                      :key="item.id"
                      :label="item.deptName"
                      :value="item.id"
                    ></el-option>
                    <el-option key label value>
                      <div class="custom_add" @click.stop="onAddDeptTree">
                        <i class="el-icon-plus"></i>
                        <span>新增</span>
                      </div>
                    </el-option>
                  </el-select>
                  <div class="custom_more">
                    <i class="el-icon-more" @click.stop="onShowTreeByDept"></i>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-row :gutter="24" style="margin-right:0">
                <el-col :span="24">
                  <el-form-item label>
                    <p slot="label" class="custom_label">行政区划</p>
                    <div style="display:flex;">
                      <el-input
                        disabled
                        style="width:60px;margin-right:20px;"
                        type="text"
                        value="中国"
                      />
                      <el-cascader
                        size="large"
                        placeholder="请选择省/市/县区"
                        :options="ssqOptions"
                        v-model="selectedOptions"
                        @change="addressChange"
                        style="flex:1"
                      ></el-cascader>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label prop="setPrice">
                    <p slot="label" class="custom_label">预设售价</p>
                    <j-dict-select-tag
                      type="select"
                      dictCode="preset_selling_price"
                      style="width:100%;"
                      v-model="newData.setPrice"
                    ></j-dict-select-tag>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label prop="setDiscountPrice">
                    <p slot="label" class="custom_label">预设折扣</p>

                    <div style="display:flex;align-items:center;height: 40px;">
                      <j-dict-select-tag
                        type="select"
                        dictCode="preset_discount"
                        style="width:100%;"
                        v-model="newData.setDiscountPrice"
                      ></j-dict-select-tag>
                      <div class="cus_div" v-if="newData.setDiscountPrice == 3">
                        <el-input
                          type="number"
                          style="width:100px;"
                          v-model="newData.fixedDiscount"
                          :min="0"
                          :max="100"
                        >
                          <template slot="append">%</template>
                        </el-input>
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12" style="padding-left: 12px;">
              <el-form-item label prop="address">
                <p slot="label" class="custom_label">详细地址</p>
                <div style="display:flex;align-items: center;position: relative;">
                  <!-- <el-input v-model="newData.address"></el-input>
                  <el-button type="primary" class="discern_btn" @click="discernAddress">识别</el-button>-->
                  <el-input
                    style="margin: 5px 0;height: 140px;"
                    v-model="newData.address"
                    type="textarea"
                    maxlength="100"
                    :show-word-limit="true"
                    resize="none"
                    :autosize="{
                      minRows: 6, maxRows: 6
                    }"
                    placeholder="输入或粘贴地址信息，自动识别单位名称、联系人、手机和地址；例：郑州象过河软件技术有限公司，象小妹，13600000000，河南省郑州市郑州高新技术产业开发区大学科技园13号楼16层"
                  ></el-input>
                  <el-button type="primary" class="discern_btn" @click="discernAddress">识别</el-button>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <div style="display: flex;">
            <div style="width: 50%;padding-right: 12px;background-color: red;"></div>

            <div style="width: 50%;padding-right: 12px;background-color: #1893FC;"></div>
          </div>-->

          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label prop="companyInvoiceStatus">
                <p
                  slot="label"
                  class="custom_label"
                  style="color:#1893FC;font-size: 14px;font-weight: 600;"
                >开票信息</p>
                <el-switch v-model="newData.companyInvoiceStatus"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 开票信息 start -->
          <div v-if="newData.companyInvoiceStatus">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label prop="depositBank">
                  <p slot="label" class="custom_label">开户银行</p>
                  <el-input v-model="newData.depositBank"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label prop="bankName">
                  <p slot="label" class="custom_label">银行账户</p>
                  <el-input v-model="newData.bankName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label prop="bankCard">
                  <p slot="label" class="custom_label">银行账号</p>
                  <el-input v-model="newData.bankCard"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label prop="taxNumber">
                  <p slot="label" class="custom_label">企业税号</p>
                  <el-input v-model="newData.taxNumber"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label prop="invoiceAddress">
                  <p slot="label" class="custom_label">开票地址</p>
                  <el-input v-model="newData.invoiceAddress"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label prop="bankPhone">
                  <p slot="label" class="custom_label">电话</p>
                  <el-input v-model="newData.bankPhone"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 开票信息 end -->
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label prop="companyRAndPStatus" v-if="!isBaseVersion">
                <p
                  slot="label"
                  class="custom_label"
                  style="color:#1893FC;font-size: 14px;font-weight: 600;"
                >应收应付</p>
                <el-switch v-model="newData.companyRAndPStatus"></el-switch>
                <span class="span_label">注：期初应收应付首次录入后，开单后不可修改。</span>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 应收应付 start -->
          <div v-if="newData.companyRAndPStatus && !isBaseVersion">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="期初应收款" prop="beginReceivable">
                  <p slot="label" class="custom_label_1">期初应收款</p>
                  <el-input v-model="newData.beginReceivable" :disabled="stockStatusDisabled"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="期初应付款" prop="beginPayable">
                  <p slot="label" class="custom_label_1">期初应付款</p>
                  <el-input v-model="newData.beginPayable" :disabled="stockStatusDisabled"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="累计应收款" prop="totalReceivable">
                  <p slot="label" class="custom_label_1">累计应收款</p>
                  <el-input v-model="newData.totalReceivable" :disabled="valueDisabled"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="累计应付款" prop="totalPayable">
                  <p slot="label" class="custom_label_1">累计应付款</p>
                  <el-input v-model="newData.totalPayable" :disabled="valueDisabled"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="应收信用额" prop="receivableQuota">
                  <p slot="label" class="custom_label_1">应收信用额</p>
                  <el-input v-model="newData.receivableQuota"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="应付信用额" prop="payableQuota">
                  <p slot="label" class="custom_label_1">应付信用额</p>
                  <el-input v-model="newData.payableQuota"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="收款期限(天)" prop="receivableTime">
                  <p slot="label" class="custom_label_1">收款期限(天)</p>
                  <el-input v-model="newData.receivableTime"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="付款期限(天)" prop="payableTime">
                  <p slot="label" class="custom_label_1">付款期限(天)</p>
                  <el-input v-model="newData.payableTime"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 应收应付 end -->
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label>
                <p slot="label" class="custom_label">备注</p>
                <el-input type="textarea" v-model="newData.companyRemark" :autosize="{ minRows: 3}"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="bottom_item" v-if="newData.typeEdit !== 1">
        <el-button
          type="primary"
          @click.stop="onAddSubmit"
          style="margin-right:20px;width: 60px;height: 30px;padding: 0;"
        >保存</el-button>
        <el-button
          @click.stop="onCancel"
          style="margin-left:20px;width: 60px;height: 30px;padding: 0;"
        >取消</el-button>
      </div>
    </el-dialog>
    <!-- 选择类别 -->
    <DialogTree ref="treeRef" @onSelectTree="onSelectTree"></DialogTree>
    <!-- 成功弹框 -->
    <PopupSuccess ref="successRef" :tipsData="tipsData"></PopupSuccess>
    <!-- 选择业务员 -->
    <DialogStaff ref="commodityRef" @onSelectStaff="onSelectStaff"></DialogStaff>
    <!-- 新增员工弹框 -->
    <DialogStaffAdd ref="staffAddRef" @onAddSubmit="onAddStaff"></DialogStaffAdd>
    <!-- 新增树形结构数据弹框 -->
    <el-dialog
      :title="this.newTreeData.module.name == 'deptName' ? '部门' : '类别信息'"
      :visible.sync="showNewTree"
      width="480px"
    >
      <NewCategory
        :newTreeData="newTreeData"
        @onSaveTreeChanges="onSaveTreeChanges"
        @onCancelTree="showNewTree = false"
      ></NewCategory>
    </el-dialog>
  </div>
</template>

<script>
import { regionData, CodeToText } from 'element-china-area-data'
import DialogTree from './dialogTree'
import PopupSuccess from './popupSuccess'
import { postAction, getAction, httpAction } from '@/api/manage'
import Area from '@/components/_util/Area'
import DialogStaff from '@/views/components/dialogStaff'
import DialogStaffAdd from '@/views/components/dialogStaffAdd'
import NewCategory from '@/components/c_category/NewCategory'
import { handleIsBaseVersion } from '../../utils'
export default {
  components: {
    DialogTree,
    PopupSuccess,
    DialogStaff,
    DialogStaffAdd,
    NewCategory
  },
  props: {
    from: {
      type: String,
      default: 'default'
    },
    newData: {
      type: Object,
      default: () => ({
        companyName: '',
        companyUserName: '',
        xghCompanyNatureId: '',
        xghCompanyNature: '',
        companyPhone: '',
        companyPinyinCode: '',
        companyLandline: '',
        xghCompanyTypeId: '', //单位类别
        companyTypeName: '',
        business: '',
        provinceName: '', //省
        provinceCode: '',
        cityName: '', //市
        cityCode: '',
        countyName: '', //区县
        countyCode: '',
        address: '',
        setPrice: '',
        setDiscountPrice: '',
        companyInvoiceStatus: false, //开票信息
        depositBank: '',
        bankName: '',
        bakCard: '',
        taxNumber: '',
        invoiceAddress: '',
        bankPhone: '',
        companyRAndPStatus: false, //应收应付
        beginReceivable: 0,
        beginPayable: 0,
        totalReceivable: 0,
        totalPayable: 0,
        receivableQuota: '',
        payableQuota: '',
        receivableTime: '',
        payableTime: '',
        companyRemark: '',
        companyNumber: '',//单位编码
        companyNationality: '中国'
      }),
    },
  },
  watch: {
    dialogVisible (val) {
      if (val == true) {
        if (this.newData.id) {
          this.selectedOptions = [this.newData.provinceCode, this.newData.cityCode, this.newData.countyCode]
          // this.valueDisabled = true
        } else {
          // this.valueDisabled = false
        }
      }
    }
  },
  computed: {
    stockStatusDisabled () {
      return this.$store.getters.openAccountValue === 3
    },
  },
  updated () {
    this.updateCount = this.updateCount + 1
  },
  mounted () {
    this.isBaseVersion = handleIsBaseVersion()
    console.log(this.isBaseVersion);
    if (this.isBaseVersion) {
      this.CompanyNatureOptions = [{
          value: '2',
          label: '客户',
        }]
    }
    this.getSelectList()
  },
  data () {
    return {
      // 传递给弹框的数据
      tipsData: {
        tipsState: '',
        tipsWords: '',
        tipsMark: '',
      },
      valueDisabled: true, //20241106 确认累计应收应付不可输入
      // 传递给选择类别的数据
      toTreeData: {},
      updateCount: 0, //判断用户是否更新当前数据
      ssqOptions: regionData, //省市区选项
      selectedOptions: [], //省市区
      // 单位性质
      CompanyNatureOptions: [
        {
          value: '1',
          label: '供应商',
        },
        {
          value: '2',
          label: '客户',
        },
        {
          value: '3',
          label: '供应商即客户',
        },
      ],
      // 单位类别
      dwlbOptions: [],
      dialogVisible: false,
      treeOptions: [], //类别列表
      deptOptions: [], //部门列表
      userOptions: [], //业务列表
      showNewTree: false,
      // 传递数据给新增树形结构组件
      newTreeData: {
        parentData: '',
        data: '',
        state: '',
        module: {
          name: ''
        }
      },
      activeOptions: [],
      rules: {
        companyName: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
        companyPhone: [{ pattern: /^1[3|4|5|6|7|8|9]\d{9}$/, message: '请输入正确的手机号!' },],
        companyLandline: [{ pattern: /^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$/, message: '请输入正确的联系电话!' },]
      },
      isBaseVersion: false,
    }
  },
  methods: {
    getTitle() {
      //newData.typeEdit === 1 ? '查看往来单位' : newData.id ? '编辑往来单位' : '新增往来单位'
      let type = this.newData.typeEdit === 1 ? '查看' :this.newData.id ? '编辑' : '新增'
      let text = this.isBaseVersion ? '客户' : '往来单位'
      return type + text
    },
    reloadData () {
      this.getSelectList('company')
    },
    getSelectList (type) {
      if (type == 'company' || !type) {
        //单位类别
        getAction('/xghCompanyType/xghCompanyType/childList', {}).then((res) => {
          if (res.code === 200) {
            this.treeOptions = res.result
          }
        })
      }
      if (type == 'dept' || !type) {
        // 所属部门
        getAction('/dept/xghAccountBookDept/getDeptByAbId', {}).then((res) => {
          if (res.code === 200) {
            this.deptOptions = res.result
          }
        })
      }
      if (type == 'user' || !type) {
        // 所属业务员
        getAction('/dept/xghAccountBookDept/getAllDeptUsers', {}).then((res) => {
          if (res.code === 200) {
            let list = res.result
            this.userOptions = list
          }
        })
      }
    },
    // 选择单位性质
    onCompanyNature (val) {
      this.newData.xghCompanyNatureId = val
    },
    // 获取新增/修改员工数据
    onAddStaff (data) {
      postAction('/dept/xghAccountBookDept/addAccountBookUser', data).then((res) => {
        if (res.code === 200) {
          this.$elMessage.success(res.message)
          this.$refs.staffAddRef.dialogVisible = false
          this.getSelectList('user')
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    onShowAddUser () {
      this.$refs.staffAddRef.dialogVisible = true
    },
    // 添加操作员
    onShowUser () {
      this.$refs.commodityRef.dialogVisible = true
    },
    // 赋值单据弹框
    onSelectStaff (val) {
      console.log(val);
      this.newData.sysUserId = val.id
    },
    // 打开选择类别弹出框
    onShowTreeByCompany () {
      this.toTreeData = {
        module: {
          name: 'companyTypeName', //类别名称字段
          code: 'companyCode', //类别编码字段
          pyCode: 'companyPinyinCode', //类别拼音码字段
          indexCode: 'companyIndexCode', //类别排序码字段
          pid: 'pid', //父级id字段
        },
        getTreeUrl: '/xghCompanyType/xghCompanyType/childList', //获取类别接口
        deleteTreeUrl: '/xghCompanyType/xghCompanyType/delete', //删除类别接口
        addTreeUrl: '/xghCompanyType/xghCompanyType/add', //新增类别接口
        editTreeUrl: '/xgh/companyType/edit', //修改类别接口
      },
        this.$refs.treeRef.getTreeData(this.toTreeData)
      this.$refs.treeRef.dialogVisible = true
    },
    onShowTreeByDept () {
      this.toTreeData = {
        module: {
          name: 'deptName', //类别名称字段
          code: 'sectionCode', //类别编码字段
          pyCode: 'pinyinCode', //类别拼音码字段
          indexCode: 'indexCode', //类别排序码字段
          pid: 'parentId', //父级id字段
        },
        getTreeUrl: '/dept/xghAccountBookDept/getDeptByAbId', //获取类别接口
        deleteTreeUrl: '/xgh/section/deleteById', //删除类别接口
        addTreeUrl: '/xgh/section/add', //新增类别接口
        editTreeUrl: '/xgh/section/edit', //修改类别接口
      }
      this.$refs.treeRef.getTreeData(this.toTreeData)
      this.$refs.treeRef.dialogVisible = true
    },
    // 选择当前类别
    onSelectTree (val) {
      if (this.toTreeData.module.name == 'deptName') {
        // this.newData.deptName = val.companyTypeName
        this.newData.accountBookDeptId = val.id
      } else if (this.toTreeData.module.name == 'companyTypeName') {
        // this.newData.companyTypeName = val.companyTypeName
        this.newData.xghCompanyTypeId = val.id
      }

      this.$forceUpdate()
    },
    // 触发新增单位类别
    onAddTree () {
      this.newTreeData = {
        data: { id: '0' },
        state: 'add',
        module: {
          name: 'companyTypeName', //类别名称字段
          code: 'companyCode', //类别编码字段
          pyCode: 'companyPinyinCode', //类别拼音码字段
          indexCode: 'companyIndexCode', //类别排序码字段
        },
        getTreeUrl: '/xghCompanyType/xghCompanyType/childList', //获取类别接口
        deleteTreeUrl: '/xghCompanyType/xghCompanyType/delete', //删除类别接口
        addTreeUrl: '/xghCompanyType/xghCompanyType/add', //新增类别接口
        editTreeUrl: '/xghCompanyType/xghCompanyType/edit', //修改类别接口
      }
      this.$refs.companySelect.blur()
      this.showNewTree = true
    },
    // 新增单位类别回调
    onSaveTreeChanges () {
      if (this.newTreeData.module.name == 'deptName') {
        this.getSelectList('dept')
      } else {
        this.getSelectList('company')
      }
      this.showNewTree = false
    },
    onAddDeptTree () {
      console.log('onAddDeptTree');
      this.newTreeData = {
        data: { id: '0' },
        state: 'add',
        module: {
          name: 'deptName', //类别名称字段
          code: 'deptCode', //类别编码字段
          pyCode: 'pinYinCode', //类别拼音码字段
          indexCode: 'backup', //备注字段
        },
        getTreeUrl: '/dept/xghAccountBookDept/getDeptByAbId', //获取类别接口
        deleteTreeUrl: '/xgh/section/deleteById', //删除类别接口
        addTreeUrl: '/dept/xghAccountBookDept/add', //新增类别接口
        editTreeUrl: '/xgh/section/edit', //修改类别接口
      }
      this.$refs.deptSelect.blur()
      this.showNewTree = true
    },
    resetForm () {
      // 编辑时，不重置表单
      if(!this.newData.id){
        this.$refs.ruleForm.resetFields();
      }
    },
    // 获取省市区数据
    addressChange (value) {
      this.newData.provinceName = CodeToText[value[0]] //省
      this.newData.provinceCode = value[0]
      this.newData.cityName = CodeToText[value[1]] //市
      this.newData.cityCode = value[1]
      this.newData.countyName = CodeToText[value[2]] //区县
      this.newData.countyCode = value[2]
    },
    discernAddress () {
      let pcaa = new Area(this.$Jpcaa);
      let text = this.newData.address.replace(/，/g, ',')
      console.log(text);
      let array = text.split(',')
      let pcaaText = ''
      if (array.length == 4) {
        this.newData.companyName = array[0]
        this.newData.companyUserName = array[1]
        if (array[2].length == 11) {
          this.newData.companyPhone = array[2]
        } else {
          this.newData.companyLandline = array[2]
        }
        pcaaText = array[3]
      } else if (array.length > 1) {
        this.newData.companyName = array[0]
        pcaaText = array.pop() //pop()返回数组最后一个元素
      } else {
        pcaaText = text
      }

      if (pcaaText) {
        let res = pcaa.getAreaByAddress(pcaaText)
        console.log(JSON.stringify(res.name));
        console.log(JSON.stringify(res.code));
        if (res.type == 'success') {
          this.selectedOptions = res.code
          this.$elMessage.success(res.message)
          let aText = res.name.pop()  //pop()返回数组最后一个元素
          this.newData.address = pcaaText.split(aText)[1] || ''
          this.$forceUpdate()
        } else if (res.type == 'warning') {
          this.newData.address = pcaaText
          this.$elMessage.warning(res.message)
        } else {
          this.newData.address = pcaaText
          this.$elMessage.error(res.message)
        }
      }
    },
    // 转换拼音码
    getNameToPinying (event) {
      this.newData.companyPinyinCode = this.$pinyin.getJp(event.target.value)
    },
    // 保存前的校验
    validateParams () {
      if (!this.newData.companyName || (this.newData.companyName && !this.newData.companyName.trim())) {
        this.$elMessage.error('单位名称不能为空')
        return false
      }
      if (!this.newData.companyNumber || (this.newData.companyNumber && !this.newData.companyNumber.trim())) {
        this.$elMessage.error('单位编码不能为空')
        return false
      }
      if (this.newData.companyPhone) {
        let result = /^1[0-9]{10}$/.test(this.newData.companyPhone)
        if (!result) {
          this.$elMessage.error('请输入正确的手机号码')
          return false
        }
      }
      if (this.newData.companyLandline) {
        let result = /^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$/.test(this.newData.companyLandline)
        if (!result) {
          this.$elMessage.error('请输入正确的联系电话')
          return false
        }
      }
      return true
    },
    copyValue () {
      this.newData.companyNationality = '中国'
      if (this.selectedOptions.length) {
        let pcaa = new Area(this.$Jpcaa);
        let text = pcaa.getText(this.selectedOptions[this.selectedOptions.length - 1])
        let arr = text.split('/')
        let address = this.newData.address || ''
        this.newData.address = address.replace(text, '')

        this.newData.provinceName = arr[0]
        this.newData.provinceCode = this.selectedOptions[0]

        this.newData.cityName = arr[1]
        this.newData.cityCode = this.selectedOptions[1]

        if (this.selectedOptions.length == 3) {
          this.newData.countyName = arr[2]
          this.newData.countyCode = this.selectedOptions[2]
        }
      }
    },
    onCancel () {
      this.dialogVisible = false
      this.resetForm()
    },
    onAddSubmit () {
      this.copyValue()
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          //更新次数大于1 说明用户修改过当前页数据
          let data = {
            ...this.newData,
            companyInvoiceStatus: this.newData.companyInvoiceStatus ? 0 : 1,
            companyRAndPStatus: this.newData.companyRAndPStatus ? 0 : 1,
            status: this.newData.status ? 0 : 1
          }
          console.log(this.from);
          
          let url = this.from == 'qichu' ? '/xghCompany/xghCompany/addQiChu' : '/xghCompany/xghCompany/add'
          let method = 'post'
          if (this.newData.id) {
            url = this.from == 'qichu' ? '/xghCompany/xghCompany/editQiChu' : '/xghCompany/xghCompany/edit'
            method = 'put'
          } else {
            data.status = '0'
          }
          // 调接口添加供应商
          httpAction(url, data, method).then((res) => {
            if (res.code === 200) {
              // 添加成功后，将成功后的商品信息返回到列表页面
              this.tipsData.tipsWords = res.message
              this.dialogVisible = false
              this.$refs.successRef.dialogVisible = true
              this.resetForm()
              this.$emit('onAddSubmit', res.result)
            } else {
              this.$elMessage.error(res.message)
            }
          })
        } else {
          this.$elMessage.error('请输入单位名称')
          return false;
        }
      });
    },
    // 关闭事件发射
    dialogVisibleClose () {
      this.selectedOptions = []
      if (this.newData.typeEdit !== 1) {
        this.$emit('dialogVisibleClose')
      }
      this.resetForm()
    },
    visibleChange (e) {
      if (!e) {
        this.activeOptions = []
      }
    },
    filterMethodByCompany (e) {
      console.log(e);
      if (this.activeOptions.length == 0) {
        this.activeOptions = Object.assign([], this.treeOptions)
      }
      if (e) {
        this.treeOptions = this.activeOptions.filter(item => {
          return item.companyTypeName.indexOf(e) > -1
        })
      } else {
        this.treeOptions = Object.assign([], this.activeOptions)
      }
    },
    filterMethodByUser (e) {
      if (this.activeOptions.length == 0) {
        this.activeOptions = Object.assign([], this.userOptions)
      }
      if (e) {
        this.userOptions = this.activeOptions.filter(item => {
          return item.realname.indexOf(e) > -1
        })
      } else {
        this.userOptions = Object.assign([], this.activeOptions)
      }
    },
    filterMethodByDept (e) {
      if (this.activeOptions.length == 0) {
        this.activeOptions = Object.assign([], this.deptOptions)
      }
      if (e) {
        this.deptOptions = this.activeOptions.filter(item => {
          console.log(item.deptName);
          return item.deptName.indexOf(e) > -1
        })
      } else {
        this.deptOptions = Object.assign([], this.activeOptions)
      }
    }
  },
}
</script>

<style lang="scss" scoped>
// ::v-deep .el-dialog__header {
//   border-bottom: #e3e3e3 solid 1px;
// }

.sup_add {
  ::v-deep .el-dialog {
    .el-dialog__body {
      padding: 10px 30px;
      // height: 75vh;
    }
    .el-form-item__error {
      top: 40px;
      padding-top: 0;
    }
  }
}

::v-deep .el-input__inner {
  height: 30px;
  line-height: 30px;
}
::v-deep .el-input__count {
  height: 20px;
  line-height: 20px;
  left: 20px;
}
::v-deep .el-form-item {
  // margin-bottom: 0px;
}

::v-deep .el-input-group__append,
.el-input-group__prepend {
  padding: 0 5px;
}

::v-deep .cus_div .el-input__inner {
  padding: 0 0 0 5px;
}
// ::v-deep .cus_div .el-form-item__content {
//   line-height: 30px;
// }

.dialog_title {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 600;
  line-height: 22px;
  color: #666666;
}
.dialog_div_new {
  height: 63vh;
  padding: 10px 20px;
  overflow: hidden;
  overflow-y: scroll;
  background: #fff;
  .el-form-item {
    margin-bottom: 0px;
  }
}
.custom_label {
  padding: 0 24px 0 10px;
  width: 90px;
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  text-justify: distribute-all-lines; /*ie6-8*/
  text-align-last: justify; /* ie9*/
  -moz-text-align-last: justify; /*ff*/
  -webkit-text-align-last: justify; /*chrome 20+*/
}
.custom_label_1 {
  padding: 0 0 0 10px;
  width: 100px;
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  text-align: left;
}
.custom_star {
  display: flex;
  width: 88px;
}
.star {
  color: red;
  margin-left: -20px;
  line-height: 30px;
  height: 40px;
}

.bottom_item {
  margin: 20px 0;
  width: 100%;
  text-align: center;
}
.discern_btn {
  position: absolute;
  right: 3px;
  bottom: 10px;
  z-index: 10;
  height: 30px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom_select_head {
  // right: 10px;
  width: 100%;
  height: 100%;
  position: relative;
}
.custom_more {
  position: absolute;
  right: 10px;
  z-index: 10;
  top: 6px;
  background: #fff;
  height: 28px;
  display: flex;
  align-items: center;
  color: #bfbfbf;
}
.custom_add {
  display: flex;
  justify-content: center;
  align-items: center;
  span {
    margin-left: 5px;
    color: #666666;
  }
  i {
    color: #666666;
  }
}
.cus_div {
  display: flex;
  align-items: center;
  margin-left: 5px;
}
.span_label {
  color: #fd6c21;
  font-size: 12px;
  margin-left: 0.562535rem;
}
.bill_mask_back_view {
  flex: 1;
  .bill_mask_view {
    z-index: 20;
  }
}
</style>